<template>
  <div style="background-color: #fff; padding: 20px">
    <div>
      <ElButton type="primary" @click="onSaveClicked">确定</ElButton>
    </div>
    <div style="margin-top: 20px">
      <ElForm :model="form" ref="formRef" status-icon>
        <ElFormItem label="火险等级" :label-width="labelWidth" prop="fireDangerRating">
          <el-radio-group v-model="form.fireDangerRating" style="margin-top: -4px">
            <el-radio v-for="item in FireRating.fireRatingEnum" :key="item.value" :value="item.value" size="large">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </ElFormItem>
      </ElForm>
    </div>
  </div>
</template>

<script setup lang="ts" name="ZLFireRating">
import { onMounted, ref, unref } from 'vue'
import { ElForm, ElFormItem } from 'element-plus'
import { FireRating, getFireRatingDetail, saveOrUpdateFireRating } from '@api/tby/fire/fireRating'
import { ElMessage } from 'element-plus'

const labelWidth = 120
const form = ref<Partial<FireRating.Form>>({})

const onSaveClicked = () => {
  if (!form.value.fireDangerRating) {
    ElMessage({
      type: 'error',
      message: '请选择火险等级'
    })
    return
  }
  const formData = { ...unref(form) }
  saveOrUpdateFireRating(formData).then(() => {
    ElMessage({
      type: 'success',
      message: '保存成功'
    })
    loadDetail()
  })
}

const loadDetail = () => {
  getFireRatingDetail().then(({ data }) => {
    form.value = data
  })
}

onMounted(() => {
  loadDetail()
})
</script>
